<!-- 对 divider 组件的编辑 -->
<template>
  <div class="divider-edit" v-if="dialogShow">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose" ref="settingComponentDialog">
      <el-divider content-position="left">设置</el-divider>
      <el-row style="width:540px;">
        <!-- <el-col :span="12">
          <el-form :label-width="formLabelWidth" @submit.native.prevent>
            <el-form-item label="宽度" style="margin-bottom:0px;">
              <el-input @blur="blurConfigWidth" size="mini" style="width:80px;" v-model="data.config.width"
                maxlength="12">
              </el-input>
              <span class="tip-color1">例如：100% </span>
            </el-form-item>
          </el-form>
        </el-col> -->
        <el-col :span="12">
          <el-form :label-width="formLabelWidth" @submit.native.prevent>
            <el-form-item label="高度" style="margin-bottom:0px;">
              <el-input @blur="blurConfigHeight" size="mini" style="width:80px;" v-model="data.config.height"
                maxlength="12">
              </el-input>
              <span class="tip-color1">例如：100px </span>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </SetDesignDialog>
  </div>
</template>

<script>
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ])
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTEMPTY, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data

      // coding ...
      if (!this.data.config.width) {
        this.data.config.width = '100%'
      }

      // coding ...
      if (!this.data.config.height) {
        this.data.config.height = '100px'
      }

      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
    //   this.close()
    // })
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      formLabelWidth: '80px',
      name: '间隔',
      bjComponent: null,
      data: null
    }
  },
  watch: {
  },
  methods: {
    blurConfigWidth () {
      let value = this.data.config.width
      if (/^-?(\d|\.)+$/.test(value)) {
        this.data.config.width = value + '%'
      }
      if (value === '') {
        this.data.config.width = '100%'
      }
    },
    blurConfigHeight () {
      let value = this.data.config.height
      if (/^(\d+(px)?)$/.test(value)) {
        if (/^(\d|\.)+$/.test(value)) {
          this.data.config.height = value + 'px'
        } else {
          this.data.config.height = value
        }
      } else {
        this.data.config.height = isNaN(parseInt(value)) ? '20px' : parseInt(value) + 'px'
      }
    },
    // .............
    close () {
      this.dialogShow = false
      this.bjComponent = null
      this.data = null
    },
    saveclose () {
      this.bjComponent.render.data = _.cloneDeep(this.data)
      BackendjsFunctions.saveComponent(this.bjComponent)
      this.close()
    }
  },
  components: {
    SetDesignDialog
  }
}

</script>
